<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="操作记录">
        <table-index :table="table" @loadData="loadData">
          <template #log="{ record }">
            <p v-for="item in record.contentList" :key="item">{{ item }}</p>
          </template>
        </table-index>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="CarVehicleDetail">
  import { onMounted, ref, reactive } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getOperateLog } from '@/api/common'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.params
  const activeType = ref('1')

  const table = useTable({
    columns: [
      { title: '操作人', dataIndex: 'userName', width: 180 },
      {
        title: '操作时间',
        dataIndex: 'operateTime',
        width: 180,
      },
      { title: '操作类型', dataIndex: 'node', width: 130 },
      { title: '设备状态', dataIndex: 'businessStatusName', width: 130 },
      { title: '备注', slotName: 'log', width: 180 },
    ],
  })
  const queryParam = reactive({})
  const loadData = useFetchTableDataApi(table, queryParam, getOperateLog)

  onMounted(() => {
    const id = routePrams.id
    if (id) {
      queryParam.bizId = id
      queryParam.bizType = 36
      loadData()
    }
  })
</script>

<style lang="less" scoped></style>
